<template>
  <div :id="uuid" class="componentsMain"></div>
</template>

<script>
import { getDataStr, pollingRefresh } from "@/utils/refreshCptData";

export default {
  name: "cpt-chart-candlestick",
  title: "基础K线图",
  icon: "el-icon-data-analysis",
  group: "chart",
  props: {
    width: Number,
    height: Number,
    option: Object,
  },
  data() {
    return {
      uuid: null,
      chartOption: {},
      chart: undefined,
      cptData: {},
    };
  },
  watch: {
    "option.attribute": {
      handler(obj, newObj) {
        this.loadChart(newObj);
      },
      deep: true, //深度监听
    },
    width() {
      this.chart.resize();
    },
    height() {
      console.log("----", 11);
      this.chart.resize();
    },
  },
  created() {
    this.uuid = require("uuid").v1();
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.uuid));
    this.refreshCptData();
  },
  methods: {
    refreshCptData() {
      pollingRefresh(this.uuid, this.option.cptDataForm, this.loadData);
    },
    loadData() {
      getDataStr(this.option.cptDataForm).then((res) => {
        this.cptData = JSON.parse(res);
        console.log(this.cptData)
        this.loadChart(this.option.attribute);
      });
    },
    loadChart(attribute) {
      this.chartOption = {
        title: {
          text:attribute.chartTitle,
          textStyle:{
            color: attribute.titleTextColor
          },
          left:attribute.titleLeft,
          top:attribute.titleTop
        },
        xAxis: {
          show: attribute.xAxisShow,
          type: 'category',
          data: this.cptData.xData.split(','),
          axisLabel:{
            color: attribute.xLabelColor,
            rotate:attribute.xFontRotate
          },
          axisLine:{
            show: attribute.xLineShow,
            lineStyle:{
              color: attribute.xLineColor
            }
          },
          axisTick:{
            show: attribute.xTickShow
          },
        },
        yAxis: {
          show: attribute.yAxisShow,
          type: 'value',
          axisLabel:{
            color: attribute.yLabelColor
          },
          axisLine:{
            show: attribute.yLineShow,
            lineStyle:{
              color: attribute.yLineColor
            }
          },
          axisTick:{//y轴刻度线
            show: attribute.yTickShow
          },
          splitLine: {//网格线
            show: attribute.yGridLineShow
          }
        },
        series: [
          {
            type: "candlestick",
            itemStyle: {
                color: attribute.profitColor,// 阳线填充色-涨
                color0: attribute.lossColor,// 阴线填充色-跌
                borderColor: attribute.profitColor,
                borderColor0: attribute.lossColor
            },
            data: this.cptData.yData,
          },
        ],
      };
      this.chart.setOption(this.chartOption);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>